<template>
  <el-dialog
    title="预览数据"
    :visible="showBtn"
    width="800px"
    @close="showBtns"
  >
    <el-form
      label-width="120px"
      :model="formData"
    >
      <div class="big">{{ articlesdig.title }}</div>
      <span> {{ articlesdig.createTime | formatData }}</span>
      <span> &nbsp;{{ articlesdig.username }}</span>
      <span> &nbsp; <i class="el-icon-view" />
        {{ articlesdig.visits }}</span>
      <div class="background">
        <div class="border" />
        <quill-editor
          v-model="articlesdig.articleBody"
          :options="editorOption"
          class="editor"
          @blur="onEditorBlur"
          @focus="onEditorFocus"
          @change="onEditorChange"
        >
          >
        </quill-editor>
      </div>
    </el-form>
  </el-dialog>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import moment from 'moment'
export default {
  name: 'Articlesdig',
  components: {
    quillEditor
  },
  // 定义时间过滤器
  filters: {
    formatData (val) {
      return moment(val).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  props: {
    articlesdig: {
      type: [Object, Number]

    },
    showBtn: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            // toggled buttons
          ]
        },
        theme: 'snow'
      },
      formData: {
        title: '', // 标题
        articleBody: '', // 文章正文
        videoURL: ''// 视频地址
      }
    }
  },
  methods: {
    async showBtns () {
      this.$emit('update:showBtn', false)
    },
    // 准备富文本编辑器
    onEditorReady () { },
    // 富文本编辑器 失去焦点事件
    onEditorBlur () { },
    // 富文本编辑器 获得焦点事件
    onEditorFocus () { },
    // 富文本编辑器 内容改变事件
    onEditorChange () {
    }

  }
}
</script>

<style scoped lang='scss'>
::v-deep .ql-container.ql-snow {
  border: none;
}
.big {
  color: black;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #606266;
}
::v-deep .ql-toolbar.ql-snow {
  display: none;
}
.background {
  background: #f5f5f5;
}
.border {
  border-bottom: 1px dashed #ccc;
}
</style>
